<template>
  <div>
    <!-- <a-card style="margin: 10px 0;"> -->
      <a-row>
        <a-col :span="24">
          <a-form
            layout="inline"
            :form="form"
            style="margin-left:10px"
            @submit="handleSubmit"
          >
            <a-form-item label="规格编码">
              <a-input
                allow-clear
                placeholder="请输入规格编码"
                v-model="code"
              ></a-input>
            </a-form-item>
            <a-form-item label="规格名称">
              <a-input
                allow-clear
                placeholder="请输入规格名称"
                v-model="name"
              ></a-input>
            </a-form-item>
            <a-form-item>
              <a-button
                type="primary"
                html-type="submit"
              >搜索</a-button>
              <a-button
            type="primary"
            style="margin-left:20px"
            @click="toPrint"
          >打印</a-button>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
    <!-- </a-card> -->
    <!-- <a-card
      title="规格清单"
     
    >
     <template #extra>
           <a-button
            type="primary"
            @click="toPrint"
          >打印</a-button>
        </template> -->
      <a-table
        bordered
        style="margin-top:20px"
        :pagination="false"
        :columns="shop"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onSelect:onSelect}"
        :rowKey="record=>record.code"
        :data-source="searchList.length || showSearch?searchList:specsList"
      >
        <span
          slot="status"
          slot-scope="txt, record"
          style="margin-left:5px"
        >
          <span v-if="record.accSpecsStatus == 10">
            启用
          </span>
          <span v-else>
            禁用
          </span>
        </span>
        <template
          slot="action"
          slot-scope="txt, record,i"
        >
          <a
            class="mr-10"
            @click="tospecs(record, i)"
          >
            编辑
          </a>
          <a-popconfirm
            :title="`确定要删除该项吗?`"
            @confirm="deletespecs(i,record.index)"
            v-if="showDelete"
          >
            <a class="mr-10">
              删除
            </a>
          </a-popconfirm>
          <a
            class="mr-10"
            @click="sync(record,20)"
            v-if="record.accSpecsStatus == 10"
          >
            停用
          </a>
          <a
            class="mr-10"
            @click="sync(record,10)"
            v-if="record.accSpecsStatus == 20"
          >
            启用
          </a>
        </template>
      </a-table>
      <a-button
        type="dashed"
        style="width: 100%;margin-top: 20px;"
        @click="tospecs('')"
      >
        <a-icon type="plus" />添加规格
      </a-button>
      <specsAdd
        v-if="showspecs"
        :specsDetail="specsDetail"
        :specsIndex="specsIndex"
        @closespecs="closespecs"
      >
      </specsAdd>
       <printContent
        @closePrint="closePrint"
        :selectList="selectList"
        v-if="showPrint"
      ></printContent>
    <!-- </a-card> -->
  </div>
</template>
<script>
import { specsList } from '@api/material/index'
import specsAdd from './specsAdd.vue'
import printContent from './specsPrint.vue'

const shop = [
  {
    title: '规格编码',
    dataIndex: 'code'
  },
  {
    title: '规格名称',
    dataIndex: 'name'
  },
  {
    title: '凑卷数量',
    dataIndex: 'pieceNumber'
  },
  {
    title: '规格状态',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '过检针等级',
    dataIndex: 'checkGradeValue'
  },
  {
    title: '备注',
    dataIndex: 'remark'
  },
  {
    title: '操作',
    width: 220,
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: {
    specsAdd,
    printContent
  },
  props: {
    accSpecsList: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      shop,
      showspecs: false,
      specsDetail: {},
      form: this.$form.createForm(this),
      showSearch: false,
      code: '',
      name: '',
      searchList: [],
      specsIndex: null,
      specsList: [],
      selectedRowKeys:[],
      selectList:[],
      showDelete:true,
      showPrint:false,
    }
  },
  // watch: {
  //   accId(newVal, oldVal) {
  //     if (newVal && newVal !== oldVal) {
  //       this.loadAccSpecs()
  //     }
  //   }
  // },
  watch: {
    accSpecsList(newVal, oldVal) {
      if (newVal && newVal !== oldVal) {
        this.specsList = newVal
      }
    }
  },
  created() {
    if (this.$route.query.examine == 10) {
        this.showDelete = false
    }
  },
  mounted() {
    // if (this.accId) {
    //   this.loadAccSpecs()
    // }
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault()
      this.searchList = []
      this.showSearch = false
      if (this.code && !this.name) {
        this.specsList.map((item, i) => {
          if (item.code.indexOf(this.code) >= 0) {
            const obj = item
            item.index = i
            this.searchList.push(obj)
          }
        })
      }
      if (!this.code && this.name) {
        this.specsList.map((item, i) => {
          if (item.name.indexOf(this.name) >= 0) {
            const obj = item
            item.index = i
            this.searchList.push(obj)
          }
        })
      }
      if (this.code && this.name) {
        this.specsList.map((item, i) => {
          if (item.name.indexOf(this.name) >= 0 && item.code.indexOf(this.code) >= 0) {
            const obj = item
            item.index = i
            this.searchList.push(obj)
          }
        })
      }
      if ((this.code || this.name) && !this.searchList.length) {
        this.showSearch = true
      }
    },
    onSelect(record, selected, selectedRows) {
      if (selected == true) {
        this.selectedRowKeys.push(record.code)
        this.selectList = selectedRows
      } else {
        this.selectedRowKeys = this.selectedRowKeys.filter(item => record.code != item)
        this.selectList = this.selectList.filter(item => record.code != item.code)
      }

    },
    toPrint(){
      this.showPrint = true
    },
    closePrint(){
      this.showPrint = false
    },
    async loadAccSpecs() {
      const res = await specsList({ accId: this.accId })
      if (res.code == 200) {
        this.specsList = res.data
      } else {
        if (res.msg) {
          this.$message.error(res.msg)
        } else {
          this.$message.error('获取规格列表失败！')
        }
      }
    },
    sync(values, type) {
      if (this.searchList.length) {
        this.searchList.map(item => {
          if (item.materialSpecsId == values.materialSpecsId) {
            item.accSpecsStatus = type
          }
        })
        this.specsList.map(item => {
          if (item.materialSpecsId == values.materialSpecsId) {
            item.accSpecsStatus = type
          }
        })
      }else{
        this.specsList.map(item => {
          if (item.materialSpecsId == values.materialSpecsId) {
            item.accSpecsStatus = type
          }
        })
      }
    },
    tospecs(record, i) {
      this.showspecs = true
      this.specsIndex = i
      this.specsDetail = record
    },
    deletespecs(i, num) {
      if (this.searchList.length) {
        this.searchList = this.searchList.filter((item, index) => index != i)
        this.specsList = this.specsList.filter((item, index) => index != num)
      } else {
        this.specsList = this.specsList.filter((item, index) => index != i)
      }
      this.$emit('changespecs', this.specsList, 1)
    },

    closespecs(values, specsIndex) {
      if (values) {
        if (this.searchList.length) {
          if (specsIndex || specsIndex === 0) {
            const newArr = this.specsList.filter(item => item.materialSpecsId == values.materialSpecsId)
            if (newArr.length > 1) {
              this.$message.error('该销售色已存在，请重新选择！')
            } else {
              this.searchList[specsIndex] = values
              const num = this.searchList[specsIndex].index
              this.specsList[num] = values
              this.showspecs = false
              this.$emit('changespecs', this.specsList)
            }
          }
        } else {
          if (this.specsList.length) {
            if (specsIndex || specsIndex === 0) {
              const newArr = this.specsList.filter(item => item.materialSpecsId == values.materialSpecsId)
              if (newArr.length > 1) {
                this.$message.error('该规格已存在，请重新选择！')
              } else {
                this.specsList[specsIndex] = values
                this.showspecs = false
                this.$emit('changespecs', this.specsList)
              }
            } else {
              const newArr = this.specsList.filter(item => item.materialSpecsId == values.materialSpecsId)
              if (newArr.length) {
                this.$message.error('该规格已存在，请重新选择！')
              } else {
                this.specsList.push(values)
                this.showspecs = false
                this.$emit('changespecs', this.specsList)
              }
            }
          } else {
            this.specsList.push(values)
            this.showspecs = false
            console.log(this.specsList)
            this.$emit('changespecs', this.specsList)
          }
        }
      } else {
        this.showspecs = false
      }
    }
  }
}
</script>
